<template>
	<view>
		<view class="bg-white padding-top-xs  padding-lr-sm">
			<swiper class="screen-swiper" :class="_swipers.dotStyle?'square-dot':'round-dot'" :indicator-dots="_swipers.indicator"
			 :circular="_swipers.circular" :autoplay="_swipers.autoplay" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in _swipers.list" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
		</view>
		<view class="cu-list grid  sticky " :class="['col-' + _navs.gridCol,_navs.gridBorder?'':'no-border']"
		 :style="'top:'+CustomBar + 'px'">
			<view class="cu-item" v-for="(item,index) in _navs.list" :key="index" v-if="index<_navs.gridCol*2" @click="goTo"
			 :data-path="item.path">
				<view :class="[item.icon, item.color]">
					<view class="cu-tag badge" v-if="item.badge&&item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.text}}</text>
			</view>
		</view>
		<view class="cu-bar bg-white margin-tb-xxs padding-lr-sm swiper-msg">
			<text class="cuIcon-notification text-orange padding-right-xs"></text>
			<swiper vertical="true" autoplay="true" circular="true" interval="3000">
				<swiper-item v-for="(item, index) in _notices.list" :key="index">
					<navigator :url="item.url" class="text-cut">{{item.text}}</navigator>
				</swiper-item>
			</swiper>
		</view>
		<com-card-list :listData="_listData"></com-card-list>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import comCardList from "@/components/my-card-list.vue"
	export default {
		components: {
			uniLoadMore,
			comCardList
		},
		data() {
			return {
				CustomBar: this.CustomBar
			};
		},
		computed: {
			_listData() {
				return this.listData;
			},
			_swipers() {
				return this.swipers;
			},
			_navs() {
				return this.navs;
			},
			_notices() {
				return this.notices;
			}
		},
		methods: {
			goTo: function(e) {
				var url = e.currentTarget.dataset.path;
				this.$util.goTo(url);
			}
		},
		props: {
			listData: { //数据列表
				type: Object,
				default () {
					return {
						list: [],
						loadStatus: "noMore"
					}; //{list:[],LoadStatus:""noMore}
				}
			},
			swipers: { //轮播图片
				type: Object,
				default () {
					return {}; //{dotStyle: false,list: [{id: 0,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg',text: ''}]}
				}
			},
			navs: { //导航
				type: Object,
				default () {
					return {}; //
				}
			},
			notices: { //通告
				type: Object,
				default () {
					return {}; //
				}
			}
		}
	}
</script>

<style>
	.cu-bar.swiper-msg {
		min-height: 80rpx;
	}

	.swiper-msg swiper {
		width: 100%;
		height: 30rpx;
	}

	.swiper-msg swiper-item {
		line-height: 30rpx;
	}
</style>
